<template>
  <div>
    <!-- 头部导航栏 -->
    <el-header>
      <div class="header-hd">
        <div class="w">
          <el-row>
            <el-col :span="8">
              <router-link to="/">
                <div class="logo">
                  <img src="@/assets/img/logo.png"
                       alt="" />
                </div>
              </router-link>
            </el-col>
            <el-col :span="16">
              <div class="header-r">
                <el-row>
                  <el-col :span="11">
                    <el-input placeholder="请输入商品信息"
                              class="search">
                      <el-button class="searchBtn"
                                 slot="append"
                                 icon="el-icon-search"></el-button>
                    </el-input>
                  </el-col>
                  <el-col :span="13">
                    <div class="r-lis">
                      <div>全部商品</div>
                      <div>捐赠</div>
                      <div>|</div>
                      <ul class="r-pic clearfix"
                          :class="{slidingUserNav:isSlidingNav}">

                        <li class="cartIcon r-pic-item">
                          <router-link to="/user"><i class="el-icon-user-solid userIcon"></i></router-link>
                          <div class="userLis"
                               v-if="userInfo">
                            <ul class="items">
                              <li class="vate item">
                                <i><img src="@/assets/img/logo1.png"
                                       alt=""></i>
                              </li>
                              <li class="item">
                                <a href="javascript:;">test</a>
                              </li>
                              <li class="item">
                                <a href="javascript:;">我的订单</a>
                              </li>
                              <li class="item">
                                <a href="javascript:;">账号资料</a>
                              </li>
                              <li class="item">
                                <a href="javascript:;">收获地址</a>
                              </li>
                              <li class="item">
                                <a href="javascript:;">售后服务</a>
                              </li>
                              <li class="item">
                                <a href="javascript:;">我的优惠</a>
                              </li>
                              <li class="item"
                                  @click="logOut">
                                <a href="javascript:;">退出</a>
                              </li>
                            </ul>
                          </div>
                        </li>

                        <li class="cartCar r-pic-item"
                            @mouseenter="isShowCart(true)"
                            @mouseleave="isShowCart(false)">
                          <i class="iconfont shopCartIcon">&#xe60c;</i><strong class="shopNum">0</strong>
                          <cart-items v-show="showCart"></cart-items>
                        </li>
                      </ul>
                    </div>

                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>

      <div id="header-nav"
           class="clearfix"
           :class="{fixedNavbar:isfixTab }">
        <div class="w">
          <ul class="nav-items clearfix">
            <router-link to="/home">
              <li class="active"
                  :class="{activeColor:'/home'===$route.fullPath}"><a href="#">首页</a>
              </li>
            </router-link>
            <router-link to="/all">
              <li :class="{activeColor:'/all'===$route.fullPath}"><a href="#">全部</a></li>
            </router-link>
            <li><a href="#">捐赠名单</a></li>
            <li><a href="#">后台管理系统</a></li>
            <li><a href="#">XMall小商城</a></li>
            <li><a href="#">XPay支付系统</a></li>
            <li><a href="#">XBoot开发平台</a></li>
            <li><a href="#">宣传视频</a></li>
            <li><a href="#">Github</a></li>
            <li><a href="#">商用授权</a></li>
          </ul>
        </div>
      </div>
    </el-header>
  </div>

</template>

<script>
import CartItems from '../carts'
import { mapState, mapMutations } from 'vuex'
export default {
  components: {
    CartItems
  },
  data() {
    return {
      // 默认不固定导航栏
      isfixTab: false,
      isSlidingNav: false
    }
  },
  computed: {
    ...mapState(['showCart', 'userInfo'])
  },
  methods: {
    ...mapMutations(['SHOWCART']),
    // 先分别获得id为testNavBar的元素距离顶部的距离和页面滚动的距离
    // 比较他们的大小来确定是否添加fixedNavbar样式
    handleTabFix() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop
      var offsetTop = document.querySelector('#header-nav').offsetTop
      scrollTop > offsetTop ? (this.isfixTab = true) : (this.isfixTab = false)
      scrollTop > offsetTop
        ? (this.isSlidingNav = true)
        : (this.isSlidingNav = false)
    },
    // 购物列表显示
    isShowCart(state) {
      this.SHOWCART({
        showCart: state
      })
    },
    // 退出登录
    logOut() {
      window.sessionStorage.clear()
      this.$router.go('/')
    }
  },
  // 监听页面滚动
  mounted() {
    window.addEventListener('scroll', this.handleTabFix, true)
  },
  // 离开当前组件前一定要清除滚动监听，否则进入其他路由会报错
  beforeRouteLeave(to, from, next) {
    window.removeEventListener('scroll', this.handleTabFix, true)
    next()
  }
}
</script>

<style lang="less" scoped>
.activeColor {
  color: #000;
  font-weight: 600;
}
// 头部导航栏
.el-header {
  height: 190px !important;
  width: 100%;
  padding: 0 !important;
  .header-hd {
    height: 100px;
    background-color: black;
    line-height: 100px;

    .logo {
      width: 50px;
      height: 40px;

      img {
        width: 100%;
      }
    }

    .header-r {
      .search {
        width: 340px;
        height: 36px;

        .searchBtn {
          width: 35px;
          display: flex;
          justify-content: center;
        }
      }

      .r-lis {
        position: relative;
        .r-pic {
          position: absolute;
          right: 38px;
          top: 0;
          .r-pic-item {
            float: left;
            color: #999;
            font-size: 23px;
            margin-right: 30px;
            a {
              color: #999 !important;
            }
          }
          .cartCar {
            .shopCartIcon {
              font-size: 23px;
            }

            .shopNum {
              display: inline-block;
              height: 20px;
              width: 20px;
              background-color: #999;
              vertical-align: middle;
              border-radius: 50%;
              color: #fff;
              text-align: center;
              line-height: 20px;
              font-size: 15px;
              margin: 0 0 7px 8px !important;
            }
          }
        }
        div {
          float: left;
          padding: 0 25px !important;
          color: #c8c8c8;
          font-size: 14px;
        }

        // 用户滑动导航栏
        .slidingUserNav {
          // transform: translateY(5px);
          position: fixed;
          height: 90px !important;
          line-height: 90px !important;
          z-index: 999999;
          top: -10px;
          right: 170px;
          color: #999;
          transform: translate3d(0, 10px, 0);
          transition: all 0.3s;
        }
      }
    }
  }

  .fixedNavbar {
    height: 90px !important;
    background-color: #f7f7f7;
    line-height: 90px !important;
    position: fixed;
    z-index: 999;
    width: 100%;
    top: 0;
    overflow: hidden;
  }

  #header-nav {
    height: 90px;
    background-color: #f7f7f7;
    width: 100%;

    .nav-items {
      height: 90px;
      line-height: 80px;
      li {
        float: left;
        a {
          padding: 0 5px !important;
          font-size: 14px;
        }

        a::before {
          content: '';
          height: 4px;
          width: 4px;
          display: inline-block;
          background-color: #999;
          border-radius: 50%;
          vertical-align: middle;
          margin-right: 10px;
        }
      }
    }
  }
}
.userLis {
  position: absolute;
  top: 80px;
  height: 450px;
  width: 200px;
  right: -80px;
  background-color: #fff;
  z-index: 9999;
  border-radius: 20px;
  box-shadow: 1px 1px 25px rgba(0, 0, 0, 0.5);
  .items {
    text-align: center;
    .vate {
      border-bottom: none;
      height: 50px;
    }
    i {
      display: block;
      height: 50px;
      width: 50px;
      border-radius: 50%;
      border: 1px solid #ccc;
      margin: 0 auto;
      margin-top: 20px;
      img {
        width: 50px;
        overflow: hidden;
        border-radius: 50%;
      }
    }
  }
  .item {
    border-bottom: 1px solid #ccc;
    height: 50px;
    line-height: 50px;
    a {
      font-size: 15px;
    }
  }
}
.cartIcon {
  position: relative;
  .userLis {
    display: none;
  }
}
.cartIcon:hover {
  .userLis {
    display: block;
  }
}
</style>
